//
//  ContentView.swift
//  SwiftUIDemo
//
//  Created by 陈旺 on 2022/2/11.
//

import SwiftUI

struct ContentView: View {
    
    @State var show = false
    @State var viewState = CGSize.zero
    
    var body: some View {
        ZStack {
            
            TitleView()
                .blur(radius: show ? 20 : 0)
                .animation(.default, value: show)
            
            BottomView()
                .blur(radius: show ? 20 : 0)
                .animation(.default, value: show)
            
            CardView(width: 320, offsetY: show ? -400 : -40, bgColor: show ? Color.orange : Color.blue)
                .scaleEffect(0.85)
                .rotationEffect(Angle(degrees: 10))
                .rotation3DEffect(Angle(degrees: show ? 50 : 0), axis: (x: 10, y: 10, z: 10))
                .blendMode(BlendMode.hardLight)
                .animation(.easeInOut(duration: 0.5), value: show)
                .offset(x: viewState.width, y: viewState.height)
            
            CardView(width: 320, offsetY: show ? -200 : -20, bgColor: show ? Color.red : Color.blue)
                .scaleEffect(0.9)
                .rotationEffect(Angle(degrees: 5))
                .rotation3DEffect(Angle(degrees: show ? 40 : 0), axis: (x: 10, y: 10, z: 10))
                .blendMode(BlendMode.hardLight)
                .animation(.easeInOut(duration: 0.5), value: show)
                .offset(x: viewState.width, y: viewState.height)
            
            CetificateCard()
                .offset(x: viewState.width, y: viewState.height)
                .scaleEffect(0.95)
                .rotation3DEffect(Angle(degrees: show ? 30 : 0), axis: (x: 10, y: 10, z: 10))
                .animation(Animation.spring(), value: show)
                .onTapGesture {
                    self.show.toggle()
                }
                .gesture(
                    DragGesture().onChanged({ value in
                        self.viewState = value.translation
                        self.show = true
                    }).onEnded({ value in
                        self.viewState = CGSize.zero
                        self.show = false
                    })
                )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 11")
.previewInterfaceOrientation(.portrait)
    }
}

struct CardView: View {
    
    var width: CGFloat
    
    var offsetY: CGFloat
    
    var bgColor: Color
    
    var body: some View {
        VStack {
            Text("Card Back")
        }
        .frame(width: width, height: 200)
        .background(bgColor)
        .cornerRadius(10)
        .shadow(radius: 20)
        .offset(x: 0, y: offsetY)
    }
}

struct CetificateCard: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .scaledToFill()
            HStack {
                VStack(alignment: .leading) {
                    Text("UI Design")
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(Color("testColor"))
                        .padding(.top)
                    Text("Certificate")
                        .foregroundColor(Color.white)
                }
                .padding(.leading)
                Spacer()
            }
            .offset(x: 0, y: -70.0)
        }
        .frame(width: 320, height: 200)
        .background(Color.black)
        .cornerRadius(10)
        .shadow(radius: 20)
    }
}

struct TitleView: View {
    var body: some View {
        VStack {
            HStack {
                Text("Certificates")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                Spacer()
            }
            Image("fish")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
            Spacer()
        }
        .padding()
    }
}

struct BottomView: View {
    var body: some View {
        VStack(spacing: 20.0) {
            Rectangle()
                .frame(width: 60, height: 6)
                .cornerRadius(3.0)
                .opacity(0.1)
            Text("This certificate is proof that Meng To has achieved the UI Design course with approval frm a Design+Code instructor.")
                .lineLimit(10)
            Spacer()
        }
        .frame(minWidth: 100, maxWidth: .infinity)
        .padding()
        .padding(.horizontal)
        .background(Color.white)
        .cornerRadius(30)
        .shadow(radius: 20)
        .offset(x: 0, y: UIScreen.main.bounds.size.height * 0.65)
        .edgesIgnoringSafeArea(.bottom)
    }
}
